<script setup>
import ArticleCardFull from "@/components/article/ArticleCardFull.vue";
import InfiniteArticle from "./InfiniteArticle.vue";
import { ref } from "vue";

const activeIndex = ref("1");
const activeIndex2 = ref("1");
const currentSelection = ref("全部"); // 新增的状态变量

// const handleSelect = (key, keyPath) => {
//   console.log(key, keyPath);
// };

const handleSelect = (key) => {
  if (key.startsWith("3-")) {
    // 根据选择项更新 currentSelection
    if (key === "3-1") {
      currentSelection.value = "全部";
    } else if (key === "3-2") {
      currentSelection.value = "普通";
    } else {
      currentSelection.value = "内推";
    }
  }
};
</script>

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">最新文章</el-menu-item>
    <el-menu-item index="2">你的关注</el-menu-item>
    <div class="right-sub-menu">
      <el-sub-menu index="3">
        <template #title>{{ currentSelection }}</template>
        <el-menu-item index="3-1">全部</el-menu-item>
        <el-menu-item index="3-2">普通</el-menu-item>
        <el-menu-item index="3-3">内推</el-menu-item>
      </el-sub-menu>
    </div>
  </el-menu>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
  </el-menu>
  <div style="height: 20px"></div>
  <!-- 文章流 -->
  <InfiniteArticle />
  <div style="height: 15px"></div>
</template>

<style scoped>
.custom-menu {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.right-sub-menu {
  margin-left: auto;
}
</style>
